<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #app{
            width: 500px;
        }
        table{
            width: 100%;
            border-collapse: collapse;
        }
        table tr th,table tr td{
            height: 35px;
            border-bottom: solid 1px #999;
            text-align: center;
        }
        .clear-btn{
            text-align: right;
        }
    </style>
</head>
<body>
<div id="app">
    <table>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
        <tr v-for="(obj,index) in arr">
            <td>{{obj.userId}}</td>
            <td>{{obj.userName}}</td>
            <td>{{obj.userAge}}</td>
            <td><button @click="clearIndex(index)">删除</button></td>
        </tr>
        <tr >
            <td colspan="4"><button @click="clear">清空</button></td>
        </tr>
    </table>
    <h2>添加</h2>
    姓名：<input type="text" v-model="userInName"><br>
    年龄：<input type="text" v-model="userInAge"><br>
    <button  @click="add">添加</button>
</div>

<script src="../vue.global.js"></script>
<script>
    Vue.createApp({
        data() {
            return{
                arr: [
                    {
                        userId: 1,
                        userName: '张三',
                        userAge: 20
                    },
                    {
                        userId: 2,
                        userName: '李四',
                        userAge: 21
                    },
                    {
                        userId: 3,
                        userName: '王五',
                        userAge: 22
                    }
                ],
                userInName:'',
                userInAge:''
            }
        },
        methods: {
            add() {
                let userId;
                if(this.arr.length === 0){
                    userId = 1
                }else {
                    userId = this.arr.length + 1
                }
                this.arr.push({
                    userId:userId,
                    userName:this.userInName,
                    userAge:this.userInAge
                })
                this.userInName = ''
                this.userInAge = ''
            },
            clearIndex(index) {
                this.arr.splice(index,1);
                for (let i = index; i < this.arr.length; i++) {
                    this.arr[i].userId --;
                }
            },
            clear(){
                this.arr.splice(0,this.arr.length)
            }
        }
    }).mount('#app')
</script>
</body>
</html>